<template>
  <div>
    <orderheader title="订单详情">
      <template v-slot:tip>
        <span>请谨防钓鱼链接或诈骗电话</span>
      </template>
    </orderheader>
    <div class="order-detial">
      <div class="order-detial-body">
        <p style="font-size: 40px">订单详情</p>
        <div class="detial-header">
          <div style="flex:1">
            <p style="font-size: 18px">订单号码:{{out_trade_no}}</p>
          </div>
          <div style="flex:1">
            <div class="order-actions">
              <ul>
                <li  v-if="index==0"><a class="btn-normal btn-small btn-primary" @click="goPay(orderNo)" >立即付款</a></li>
                <li v-if="index==0"><a class="btn-normal btn-small btn-gray"
                       @click="this.$router.push({path:'/order/orderDetial',query:{orderNo:2}})">取消订单</a></li>
                <li  v-if="index==1"><a class="btn-normal btn-small btn-primary" @click="takeGoods(orderNo)" >确认收货</a></li>
                <li v-if="index==1"><a class="btn-normal btn-small btn-primary" @click="drawback()">申请退款</a></li>
                <li><a class="btn-normal btn-small btn-gray">联系客服</a></li>

              </ul>
              <!--  -->
              <!--      <a class="btn-normal btn-small btn-gray"  @click="$router.push('/order/orderDetial')">查看详情</a>-->
              <!--      <a class="btn-normal btn-small btn-gray" >联系客服</a>-->
            </div>
          </div>

        </div>
        <p style="font-size: 18px;color: #FF6600;height: 40px">{{orderList.statusDesc}}</p>
        <div class="time" v-if="index!=5">
          <div>
            <p class="p-active-1" v-if="index==0">下单</p>
            <p class="p-active-2" v-if="index>0">下单</p>
          </div>
          <div>
            <p class="p-active-4" v-if="index==1">付款</p>
            <p class="p-active-3" v-if="index>1">付款</p>
            <p v-if="index<1">付款</p>
          </div>
          <div>
            <p class="p-active-4" v-if="index==2">配货</p>
            <p class="p-active-3" v-if="index>2">配货</p>
            <p v-if="index<2">配货</p>
          </div>

          <div>
            <p class="p-active-4" v-if="index==3">出库</p>
            <p class="p-active-3" v-if="index>3">出库</p>
            <p v-if="index<3">出库</p>
          </div>
          <div>
            <p class="p-active-5" v-if="index>=4">交易成功</p>
            <p v-if="index<4">交易成功</p>
          </div>
        </div>
        <p style="padding-left: 20px">2021-05-14</p>
        <orderitem :item-list="itemList"></orderitem>
        <Receivinginformation :ordFina="ordFina"
                              :orderList="orderList"
                              @pay="goPay"
        ></Receivinginformation>
      </div>

    </div>

  </div>
</template>

<script>
  import orderheader from '../components/OrderHeader'
  import orderitem from '../components/orderDetial-item'
  import Receivinginformation from "../components/Receivinginformation";
  import orderList from "./orderList";

  export default {
    name: "orderDetial",
    data() {
      return {
        index: 0,
        out_trade_no: 0,
        itemList: [],
        ordFina: {},
        orderList: {}
      }
    },
    components: {
      orderitem,
      orderheader,
      Receivinginformation
    },
    created() {
      this.out_trade_no = this.$route.query.out_trade_no
      this.initData()
    },
    methods: {
      drawback(){
        this.$axios.get("/alipay/drawback",{params:{out_trade_no:this.out_trade_no,refund_amount:this.orderList.payment}}).then((res)=>{

          console.log(res)
        })

      },
      goPay(orderNo) {
        console.log("触发")
        // 三种路由跳转方式
        // this.$router.push('/order/pay')
        // this.$router.push({
        //   name: 'order-pay',
        //   query: {
        //     orderNo: orderNo
        //   }
        // })
        this.$router.push({
          path: '/order/pay',
          query: {
            orderNo
          }
        })
      },
      initData() {
        this.$axios.get('/orders//getOrderDetialByNo', {params: {id: this.out_trade_no}}).then((res) => {
          this.orderList = res.orderList
          this.ordFina = res.ordFina
          this.itemList = res.itemList
          this.index=res.orderList.status
        })

      },
      takeGoods(orderNo){
        this.$axios.get('/takeGoods',{params:{orderNo}}).then((res)=>{
          console.log(res)
        })
      }

    }
  }
</script>

<style scoped>
  .order-detial {
    background-color: #F5F5F5;
    padding: 2% 15%;
  }

  .order-detial-body {
    background-color: #ffffff;
    padding: 40px 100px;
  }

  .time {
    display: flex;
    margin: 20px 0px;
    border-radius: 20px;
    background: #eeeeee;
  }

  .time div {

    flex: 1;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .detial-header {
    display: flex;
    align-items: center;
  }

  .p-active-1 {
    background: #FF6600;
    color: #ffffff;
    border-radius: 20px;
  }

  .p-active-2 {
    background: #FF6600;
    border-radius: 20px 0px 0px 20px;
    color: #ffffff;

  }

  .p-active-3 {
    background: #FF6600;
    color: #ffffff;
  }

  .p-active-4 {
    background: #FF6600;
    color: #ffffff;
    border-radius: 0px 20px 20px 0px;
  }

  .p-active-5 {
    background: #FF6600;
    color: #ffffff;
    border-radius: 0px 20px 20px 0px;
  }

  .order-actions {
    width: 100%;
    text-align: right;
    vertical-align: top;
    padding: 25px 5px;
  }

  .order-actions li {
    float: left;
    margin: 10px;
    cursor: pointer;

  }

  .order-actions ul {
    height: 50px;
  }

  .btn-normal {
    text-align: center;
    color: #e0e0e0;
    display: block;
    margin: 0 0 10px auto;
    cursor: pointer;
    transition: all .4s;
  }

  .btn-gray {

    border: 1px solid #b0b0b0;
    color: #757575;
  }

  .btn-small {
    width: 118px;
    height: 28px;
    font-size: 12px;
    color: #757575;
    line-height: 28px;
  }

  .btn-primary {

    background: #ff6700;
    color: #ffffff;

  }
</style>
